<template>
    <div class="rx-Button">
        <div class="rx-tag-content">
            <view v-if="curVal">{{curVal}} </view>
            <view class="rx-placeholder" v-else>
                {{placeholder}}
            </view>
            <uv-icon v-if="curVal && !readOnly" @click="onAllowClear" class="icon-delete" name="close-circle"></uv-icon>
        </div>
        <div class="rx-tag-icon" v-if="!readOnly" @click="handClick"><my-icon type="icon-Vue3_setting"></my-icon></div>
    </div>
</template>

<script>
export default {
    name: "RxEditButton",
    props:{
        /**
         * 只读
         */
        readOnly:{
            default:false
        },
        modelValue:{
            type: String
        },
        //占位内容
        placeholder:'',
        //清除
        allowClear:{
          default:false
        }
    },
    emits:['btnClick','deleteClose','update:modelValue','setData'],
    data(){
        return{
            curVal:"",
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"allLang",key);
        },
        handClick(){
            this.$emit("btnClick",this);
        },
        deleteClose(item,index){
            this.curVal.splice(index,1);
            this.$emit('update:modelValue',  this.curVal);
            this.$emit("deleteClose",item);
        },
        onAllowClear(){
            this.curVal = '';
            this.$emit('setData','')
            this.$emit('update:modelValue',  this.curVal);
        }
    },
    watch: {
        modelValue: {
            handler(v) {
                this.curVal = v;
            },
            deep: true,
            immediate: true
        }
    },
}
</script>

<style scoped>
.rx-Button{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
}
.rx-tag-box{
    margin-bottom: 4px;
    margin-right: 4px;
    font-size: 0.7rem;
    align-items: center;
    list-style: none;
    height: auto;
    margin-inline-end: 8px;
    padding-inline: 7px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    opacity: 1;
    transition: all 0.2s;
    text-align: start;
    padding: 0.2rem 0.5rem;
    display: flex;
}
.icon-delete{
    position: absolute;
    right: 0.5rem;
    top: 0.6rem;
}
.rx-tag-content{
    position: relative;
    padding: 4px 11px 0;
    border: 1px solid #d9d9d9;
    flex: 1;
    display: flex;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    z-index: 0;
    min-height: 2rem;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.rx-tag-icon{
    display: flex;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    align-items: center;
    padding: 0 11px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #d9d9d9;
    position: relative;
    z-index: 0;
    margin-left: -1px;
}
.rx-placeholder{
    display: flex;
    align-items: center;
    margin-top: -4px;
    color:#ccc;

}
</style>
